import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import PropTypes from 'prop-types';
import { Button, Modal, message } from 'antd';
import moment from 'moment';
import TabTitle from '@/components/TabTitle/TabTitle'
import EditForm from '@/components/EditForm/EditForm'
import OperationRecord from '@/components/OperationRecord/OperationRecord'
import NewsPreview from '@/components/NewsPreview/NewsPreview'
import RejectReasonConfirm from '@/components/RejectReasonConfirm/RejectReasonConfirm'
import http from '../../../common/http';

const confirm = Modal.confirm;

@inject('rootStore') @observer
class ContributionEdit extends Component {
  @observable newsDetails = {}
  @observable detailsLoadSuccess = false;
  @observable showPreviewModal = false;
  @observable operationRecord = [];
  @observable updateSuccess = false;
  @observable showRejectReasonModal = false;
  @observable rejectReasonValue = '';

  componentDidMount () {
    const newsStore = this.props.rootStore.newsStore;
    document.getElementsByClassName('ant-layout-content')[0].scrollTop = 0;
    this.toGetNewsListDetails(this.props.match.params.id)
    this.toGetOperation(this.props.match.params.id)

    if (!newsStore.categoryFiftyLoadSuccess) {
      newsStore.toGetNewsCategoryFifty('en')
    }
  }

  toGetNewsListDetails = (id) => {
    const globalStore = this.props.rootStore.globalStore
    globalStore.toShowLoding();
    const param = {
      id: id,
    }
    http.get('/contributeBoss/detail', param)
    .then((response) => {
      globalStore.toHideLoading();
      if (response.success) {
        const resData = response.data;
        this.newsDetails = resData;
        this.detailsLoadSuccess = true
      }
    })
  }

  toGetOperation = (id) => {
    const param = {
      contributeBossId: id,
    }

    http.get('/news/articleOperate/page', param)
    .then((response) => {
      if (response.success) {
        this.operationRecord = response.data.dataList;
      }
    })
  }

  toPreview = () => {
    this.showPreviewModal = true
  }

  newsPrevieCancel = () => {
    this.showPreviewModal = false
  }

  toRelese = () => {
    http.post('/contributeBoss/edit', this.newsDetails)
    .then((response) => {
      if (response.success) {

      }
    })
  }

  titleOnChange = (e) => {
    this.newsDetails.title = e.target.value
  }

  richTextOnChange = (value) => {
    this.newsDetails.content = value;
  }

  authorOnChange = (e) => {
    this.newsDetails.author = e.target.value
  }

  timeOnChange = (value) => {
    console.log(value);
    // this.newsDetails.gmtModified
  }

  keyWordOnChange = (e) => {
    this.newsDetails.keywords = e.target.value
  }

  categoryOnChange = (value) => {
    this.newsDetails.categoryId = value
  }

  summarizeOnChange = (e) => {
    this.newsDetails.summarize = e.target.value
  }

  confrimReject = () => {
    const contributionStore = this.props.rootStore.contributionStore;
    const param = {
      ids: this.props.match.params.id,
      content: this.rejectReasonValue
    }

    http.post('/contributeBoss/releaseContribute', param)
    .then((response) => {
      if (response.success) {
        message.success('Success');
        this.cancelReject();
        contributionStore.toGetContributionList();
      }
    })
  }

  cancelReject = () => {
    this.showRejectReasonModal = false;
    this.rejectReasonValue = '';
  }

  showSaveConfirm = (props) => {
    const globalStore = this.props.rootStore.globalStore;
    const status = this.newsDetails.status
    const that = this

    confirm({
      title: 'Are you sure save this news?',
      content: 'You can reapprove it in unavailable list',
      okText: 'Confirm',
      cancelText: 'Cancel',
      centered: true,
      onOk() {
        globalStore.toShowLoding();
        http.post('/contributeBoss/edit', that.newsDetails)
        .then((response) => {
          if (response.success) {
            globalStore.toHideLoading()
            message.success('Success');
            setTimeout(() => {
              props.history.push(`/contribution/pendinglist/${status}`)
            }, 1000)
          }
        })
      },
      onCancel() {
      },
    });
  }

  showApproveConfirm = (props) => {
    const globalStore = this.props.rootStore.globalStore;
    const status = this.newsDetails.status
    const that = this

    confirm({
      title: 'Are you sure approve this news?',
      content: 'You can reapprove it in unavailable list',
      okText: 'Confirm',
      cancelText: 'Cancel',
      centered: true,
      onOk() {
        globalStore.toShowLoding();
        http.post('/contributeBoss/edit', that.newsDetails)
        .then((response) => {
          if (response.success) {
            globalStore.toHideLoading()
            const param = {
              ids: props.match.params.id
            }

            http.post('/contributeBoss/releaseContribute', param)
            .then((response) => {
              if (response.success) {
                message.success('Success');
                setTimeout(() => {
                  props.history.push(`/english/newslist/${status}`)
                }, 1000)
              }
            })
          }
        })
      },
      onCancel() {
      },
    });
  }

  showRejectConfirm = (props) => {
    this.showRejectReasonModal = true
    this.showPreviewModal = false
  }

  showTopConfirm = (props) => {
    const status = this.newsDetails.status

    confirm({
      title: 'Are you sure top this news?',
      content: 'You can reapprove it in unavailable list',
      okText: 'Confirm',
      cancelText: 'Cancel',
      centered: true,
      onOk() {
        const param = {
          id: props.match.params.id
        }

        http.post('/contributeBoss/top', param)
        .then((response) => {
          if (response.success) {
            message.success('Success');
            setTimeout(() => {
              props.history.push(`/english/newslist/${status}`)
            }, 1000)
          }
        })
      },
      onCancel() {
      },
    });
  }

  showCancelTopConfirm = (props) => {
    const status = this.newsDetails.status

    confirm({
      title: 'Are you sure revoke this news?',
      content: 'You can reapprove it in unavailable list',
      okText: 'Confirm',
      cancelText: 'Cancel',
      centered: true,
      onOk() {
        const param = {
          id: props.match.params.id
        }

        http.post('/contributeBoss/cancel', param)
        .then((response) => {
          if (response.success) {
            message.success('Success');
            setTimeout(() => {
              props.history.push(`/english/newslist/${status}`)
            }, 1000)
          }
        })
      },
      onCancel() {
      },
    });
  }

  showRemoveConfirm = (props) => {
    const globalStore = this.props.rootStore.globalStore;
    const status = this.newsDetails.status
    const that = this

    confirm({
      title: 'Are you sure remove this news?',
      content: 'You can reapprove it in unavailable list',
      okText: 'Confirm',
      cancelText: 'Cancel',
      centered: true,
      onOk() {
        globalStore.toShowLoding();
        http.post('/contributeBoss/edit', that.newsDetails)
        .then((response) => {
          if (response.success) {
            globalStore.toHideLoading()
            const param = {
              ids: props.match.params.id
            }

            http.post('/contributeBoss/offline', param)
            .then((response) => {
              if (response.success) {
                message.success('Success');
                setTimeout(() => {
                  props.history.push(`/english/newslist/${status}`)
                }, 1000)
              }
            })
          }
        })
      },
      onCancel() {
      },
    });
  }

  showReapproveConfirm = (props) => {
    const globalStore = this.props.rootStore.globalStore;
    const status = this.newsDetails.status
    const that = this

    confirm({
      title: 'Are you sure reapprove this news?',
      content: 'You can reapprove it in unavailable list',
      okText: 'Confirm',
      cancelText: 'Cancel',
      centered: true,
      onOk() {
        globalStore.toShowLoding();
        http.post('/contributeBoss/edit', that.newsDetails)
        .then((response) => {
          if (response.success) {
            globalStore.toHideLoading()
            const param = {
              ids: props.match.params.id
            }

            http.post('/contributeBoss/releaseContribute', param)
            .then((response) => {
              if (response.success) {
                message.success('Success');
                setTimeout(() => {
                  props.history.push(`/english/newslist/${status}`)
                }, 1000)
              }
            })
          }
        })

      },
      onCancel() {
      },
    });
  }

  showDeleteConfirm = (props) => {
    const status = this.newsDetails.status

    confirm({
      title: 'Are you sure delete this news?',
      content: 'You can reapprove it in unavailable list',
      okText: 'Confirm',
      cancelText: 'Cancel',
      centered: true,
      onOk() {
        const param = {
          id: props.match.params.id
        }

        http.post('/contributeBoss/delete', param)
        .then((response) => {
          if (response.success) {
            message.success('Success');
            setTimeout(() => {
              props.history.push(`/english/newslist/${status}`)
            }, 1000)
          }
        })
      },
      onCancel() {
      },
    });
  }

  showReleaseConfirm = (props) => {
    const globalStore = this.props.rootStore.globalStore;
    const status = this.newsDetails.status
    const that = this

    confirm({
      title: 'Are you sure release this news?',
      content: 'You can reapprove it in unavailable list',
      okText: 'Confirm',
      cancelText: 'Cancel',
      centered: true,
      onOk() {
        globalStore.toShowLoding();
        http.post('/contributeBoss/edit', that.newsDetails)
        .then((response) => {
          if (response.success) {
            globalStore.toHideLoading()
            const param = {
              ids: props.match.params.id
            }

            http.post('/contributeBoss/releaseContribute', param)
            .then((response) => {
              if (response.success) {
                message.success('Success');
                setTimeout(() => {
                  props.history.push(`/english/newslist/${status}`)
                }, 1000)
              }
            })
          }
        })

      },
      onCancel() {
      },
    });
  }

  backToList = (props) => {
    props.history.goBack();
  }

  static propTypes = {
    match: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const newsStore = this.props.rootStore.newsStore;
    const breadCrumb = ['Contribution', 'Pending List', 'Edit']

    return (
      <div className="news-edit">
        <TabTitle
          title="Contribution Edit"
          breadCrumb={breadCrumb} />
        <div className="page-content edit-form mt132">
          <div className="edit-form-btn-group">
            <div className="left-group">
              {
                this.newsDetails.status === 0 ?
                <span>
                  <Button
                    type="primary"
                    className="edit-btn"
                    onClick={() => this.showSaveConfirm(this.props)}>Save</Button>
                  <Button
                    type="primary"
                    className="edit-btn"
                    onClick={() => this.showReleaseConfirm(this.props)}>Release</Button>
                  <Button
                    type="primary"
                    className="edit-btn"
                    onClick={() => this.showRejectConfirm(this.props)}>Reject</Button>
                </span>

                :
                null
              }
              {
                this.newsDetails.status === 2 && !this.newsDetails.top ?
                <Button
                  type="primary"
                  className="edit-btn"
                  onClick={() => this.showTopConfirm(this.props)}>Top</Button>
                :
                null
              }
              {
                this.newsDetails.status === 2 && this.newsDetails.top ?
                <Button
                  type="primary"
                  className="edit-btn"
                  onClick={() => this.showCancelTopConfirm(this.props)}>Revoke</Button>
                :
                null
              }
              {
                this.newsDetails.status === 2 ?
                <Button
                  type="primary"
                  className="edit-btn"
                  onClick={() => this.showRemoveConfirm(this.props)}>Remove</Button>

                :
                null
              }
              <Button
                type="primary"
                className="edit-btn"
                onClick={this.toPreview}>Preview</Button>
            </div>
            <div className="right-group">
              <Button
                type="primary"
                className="back-btn"
                onClick={() => this.backToList(this.props)}>Back</Button>
            </div>
          </div>
          {
            this.detailsLoadSuccess &&
            JSON.stringify(this.newsDetails) !== "{}" &&
            this.newsDetails !== undefined ?
            <EditForm
              toRelese={this.toRelese}
              title={this.newsDetails.title}
              titleOnChange={this.titleOnChange}
              author={this.newsDetails.author}
              authorOnChange={this.authorOnChange}
              time={moment(this.newsDetails.gmtModified)}
              timeOnChange={this.timeOnChange}
              keyWord={this.newsDetails.keywords}
              category={this.newsDetails.categoryId}
              categoryList={newsStore.categoryListFifty}
              categoryOnChange={this.categoryOnChange}
              keyWordOnChange={this.keyWordOnChange}
              summarize={this.newsDetails.summarize}
              summarizeOnChange={this.summarizeOnChange}
              richTextValue={this.newsDetails.content}
              richTextOnChange={this.richTextOnChange} />
            :
            null
          }
          {
            this.operationRecord && this.operationRecord.length !== 0 ?
            <OperationRecord
              operationRecord={this.operationRecord} />
            :
            null
          }
          {
            this.detailsLoadSuccess &&
            JSON.stringify(this.newsDetails) !== "{}" &&
            this.newsDetails !== undefined ?
            <Modal
              title="News Preview"
              width={1165}
              visible={this.showPreviewModal}
              onCancel={this.newsPrevieCancel}
              footer={[
                <div>
                  {
                    this.newsDetails.status === 0 ?
                    <Button
                      className="btn95"
                      key="Delete"
                      onClick={() => this.showRejectConfirm(this.props)}>Reject</Button>
                    :
                    null
                  }
                  {
                    this.newsDetails.status === 0 ?
                    <Button
                      className="btn95"
                      key="Delete"
                      type="primary"
                      onClick={() => this.showApproveConfirm(this.props)}>Approve</Button>
                    :
                    null
                  }
                  {
                    this.newsDetails.status === 2 && !this.newsDetails.top ?
                    <Button
                      type="primary"
                      className="edit-btn"
                      onClick={() => this.showTopConfirm(this.props)}>Top</Button>
                    :
                    null
                  }
                  {
                    this.newsDetails.status === 2 && this.newsDetails.top ?
                    <Button
                      type="primary"
                      className="edit-btn"
                      onClick={() => this.showCancelTopConfirm(this.props)}>Revoke</Button>
                    :
                    null
                  }
                  {
                    this.newsDetails.status === 1  ?
                    <Button
                      type="primary"
                      className="edit-btn"
                      onClick={() => this.showReapproveConfirm(this.props)}>Reapprove</Button>
                    :
                    null
                  }
                  {
                    this.newsDetails.status === 2  ?
                    <Button
                      className="edit-btn"
                      onClick={() => this.showRemoveConfirm(this.props)}>Remove</Button>
                    :
                    null
                  }
                  {
                    this.newsDetails.status === 1 ?
                    <Button
                      className="edit-btn"
                      onClick={() => this.showDeleteConfirm(this.props)}>Delete</Button>
                    :
                    null
                  }
                </div>
              ]}>
              <NewsPreview newsListDetails={this.newsDetails} />
            </Modal>
            :
            null
          }
          <RejectReasonConfirm
            showRejectReasonModal={this.showRejectReasonModal}
            confrimReject={this.confrimReject}
            cancelReject={this.cancelReject}
            rejectReasonValue={this.rejectReasonValue}
            rejectReasonValueOnChange={this.rejectReasonValueOnChange} />
        </div>
      </div>
    )
  }
}

export default ContributionEdit;
